<template>
  <div>
    <!-- 做题过程选题抽屉 -->
    <div class="box">
      <el-drawer
        @open="handleOpen"
        @close="handleClose"
        :size="size"
        :visible.sync="drawer"
        :direction="direction"
      >
        <div class="title">
          <div class="cate-title">
            <div class="imgshow"><img v-lazy="img" alt="" /></div>
            <div>{{ selectedName }}</div>
          </div>
          <div class="search-ipt">
            <el-input
              @change="searchChange"
              @keyup.enter.native="search"
              @clear="clearIpt"
              prefix-icon="el-icon-search"
              placeholder="题号搜索"
              v-model="keywords"
              clearable
            ></el-input>
          </div>
        </div>
        <!-- tab切换 -->
        <div class="tabs">
          <div class="grid-content bg-purple">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="全部" name="all"></el-tab-pane>
              <el-tab-pane label="全部真题" name="zt"></el-tab-pane>
              <el-tab-pane label="本周预测" name="yc"></el-tab-pane>
              <el-tab-pane label="练习题目" name="lx"></el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <div class="tips">已练{{ lxTotal }}题，搜索到{{ total }}道题</div>
        <!-- 表格区域 -->
        <div class="container">
          <div class="tb">
            <div class="sort">
              <span @click="sortByTh('titleNumber')"
                >题号 <i class="iconfont icon-paixu-"></i
              ></span>
              <span
                class="times"
                @mouseleave="isTimeShow = false"
                @mouseenter="isTimeShow = true"
              >
                <span ref="times">次数</span> &nbsp;&nbsp;
                <i class="iconfont icon-xiajiantou_huaban"></i>
                <div class="time_box" v-if="isTimeShow === true">
                  <span @click="selectTime($event, '')">全部</span>
                  <span @click="selectTime($event, 0)">0次</span>
                  <span @click="selectTime($event, 1)">1次</span>
                  <span @click="selectTime($event, 2)">2次</span>
                  <span @click="selectTime($event, 3)">3次</span>
                </div>
              </span>
              <span
                class="collect"
                @mouseenter="isCollectShow = true"
                @mouseleave="isCollectShow = false"
              >
                收藏
                <i class="iconfont icon-xiajiantou_huaban"></i>

                <div
                  class="collect_box"
                  @mouseenter="isCollectShow = true"
                  v-if="isCollectShow === true"
                >
                  <span @click="selectCollect('jj-color')">
                    <i class="iconfont icon-2x1 jj-color"></i>
                  </span>
                  <span @click="selectCollect('lxt-color')">
                    <i class="iconfont icon-2x1 lxt-color"></i>
                  </span>
                  <span @click="selectCollect('wrong-color')">
                    <i class="iconfont icon-2x1 wrong-color"></i>
                  </span>
                  <span @click="selectCollect('gpzt-color')">
                    <i class="iconfont icon-2x1 gpzt-color"></i>
                  </span>
                </div>
              </span>
              <span
                class="state"
                @mouseenter="isStateShow = true"
                @mouseleave="isStateShow = false"
                >学习状态 <i class="iconfont icon-xiajiantou_huaban"></i>
                <div
                  class="state_box"
                  @mouseenter="isStateShow = true"
                  @mouseleave="isStateShow = false"
                  v-if="isStateShow === true"
                >
                  <span @click="selectState('')">全部状态</span>
                  <span @click="selectState('1')">已练习</span>
                  <span @click="selectState('0')">未练习</span>
                </div>
              </span>
              <span class="tips_wx">温馨提示：错题请标记红色标签</span>
            </div>
            <ul class="tm">
              <li v-for="(item, index) in list" :key="index">
                <span
                  class="title"
                  @click="goTo(item.id, item.typeCode, item.subjectType, index)"
                >
                  <span class="num"
                    >{{
                      page > 1 ? (page - 1) * 30 + index + 1 : index + 1
                    }}.</span
                  >
                  {{ item.title }}
                </span>
                <span
                  ><el-tag class="jj-bg" v-if="item.isJt === '1'">机经</el-tag>
                  <el-tag class="lxt-bg" v-if="item.isJt !== '1'"
                    >练习题</el-tag
                  >
                  <el-tag
                    class="wrong-bg"
                    v-if="item.labelStyle == 'wrong-color'"
                    >错题</el-tag
                  >
                  <el-tag class="gpzt-bg" v-if="item.isYc == '1'"
                    >本周预测</el-tag
                  >
                  <el-tag class="lxcs-bg">练习{{ item.num }}次</el-tag>
                  <el-tag class="ylx-bg">{{ item.titleNumber }}</el-tag></span
                >
                <span class="label_td"
                  ><!-- 每种题型 的label不同 -->
                  <i
                    @mouseenter="enterLabel"
                    @mouseleave="leaveLabel"
                    :class="'iconfont icon-2x1 ' + item.labelStyle"
                  ></i>
                  <!-- <Label :id="item.id" :df="item.labelStyle"></Label> -->
                </span>
              </li>
            </ul>
          </div>
          <!-- 分页器 -->
          <!-- 分页区域 -->
          <!-- size-change：是指页面显示条数改变时触发 -->
          <!-- current-change：是指页码发生改变时触发 -->
          <!-- current-page：指当前页码 -->
          <!-- page-sizes：指每页显示个数选择器的配置项 -->
          <!-- page-size：指每页显示的条数 -->
          <!-- layout：指配置分页显示样式，控制分页组件 UI 的显示 -->
          <!-- total：总条目数 -->
        </div>
        <!-- 分页器 -->
        <el-pagination
          large
          background
          :page-size="rows"
          layout="prev, pager, next"
          :total="total"
          :current-page="page"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </el-drawer>
      <el-button
        id="drawerBtn"
        @click="handleDrawer"
        type="primary"
        class="drawerbtn"
      >
        <i class="iconfont icon-youyi" v-if="drawer"></i>
        <i class="iconfont icon-zuoyi" v-else></i>
        <div class="txt">选题</div>
      </el-button>
    </div>
  </div>
</template>

<script>
import api from "@/config/api";
import { sendPost } from "@/utils/http";
import Velocity from 'velocity-animate'
// 导入标签组件
export default {
  components: {
  },
  props: ['img', 'selectedTab'],
  data () {
    return {
      selectedName: sessionStorage.getItem('selectedName'),
      drawer: false,
      direction: 'rtl',
      size: '78rem',
      activeName: 'all',
      subjectType: '1',
      show: true,
      list: [],//题目列表
      filterList: [], // 用来做筛选的题目列表
      lxTotal: 0,//已联系题数
      total: 0,//总题数
      page: 1,
      rows: 30,
      num: [], // 练习次数
      pages: 0, //总页数
      sortType: null, // 数组对象中的哪一个属性进行排序
      order: true,  // 升序还是降序
      selectNum: null,  // 次数赛选
      selectColour: null,  // 颜色赛选
      selectFlag: null,//学习状态赛选
      isTimeShow: false, // 次数选择的显示隐藏
      isCollectShow: false, // 是否收藏的显示隐藏
      isStateShow: false, // 是否练习的显示隐藏
      typeType: '', //查询类型 yc本周预测 lx 联系  zt 真题
      keywords: '',
      isShowTip: false
    }
  },
  created () {

    console.log(sessionStorage.getItem('idx'));
    this.page = Math.ceil(sessionStorage.getItem('idx') / this.rows)
    if (sessionStorage.getItem('typeId')) {
      this.subjectType = sessionStorage.getItem('typeId')
    } else {
      this.subjectType = '1'
    }
    this.getSubjectType()

    if(sessionStorage.getItem('activeName')){
      this.activeName = sessionStorage.getItem('activeName')
      this.typeType=this.activeName
      this.getSubjectList()
    }

  },
  methods: {
    // 清空搜索框时，触发获取题目列表事件
    clearIpt () {
      this.getSubjectType()
      this.isShowTip = false
    },
    searchChange () {
      if (this.keywords.length == 0) {
        this.clearIpt()
      }
    },
    search () {
      this.getSubjectList();
    },
    // 根据收藏的颜色来筛选题目
    selectCollect (e) {
      this.isCollectShow = false
      this.selectFlag = null;
      this.selectNum = null
      this.selectColour = e;
      this.getSubjectList();
    },
    // 根据学习状态筛选题目
    selectState (e) {
      // console.log(e);
      this.isStateShow = false
      this.page = 1;
      this.selectFlag = e;
      this.selectNum = null;
      this.selectColour = null;
      this.getSubjectList();
    },
    // 选择练习次数筛选题目
    selectTime (e, num) {
      // console.log(e);

      this.isTimeShow = false
      this.page = 1;
      this.selectFlag = null;
      this.selectNum = num
      this.$refs.times.innerText = e.target.innerText
      this.selectColour = null;
      this.getSubjectList();
    },
    handleSelect (key, keyPath) {
      // console.log(key, keyPath)
    },
    // 处理筛选tab切换
    handleClick (tab, e) {

      this.typeType = tab.name;
      // this.typeType=this.activeName
      this.activeName = tab.name
      sessionStorage.setItem('activeName', tab.name)
      this.getSubjectList();
    },
    // 以下是表格内容筛选的排序方法
    sortByOrder () {
      this.currentOrder = 'order'
    },
    sortAll () {
      this.currentOrder = 'all'
    },
    sortByweekPredict () {
      this.currentOrder = 'weekPredict'
    },
    sortBypractice () {
      this.currentOrder = 'practice'
    },
    // 按照题号排序
    sortByTh (type) {
      this.sortType = type
      this.order = !this.order // 更改为 升序或降序
      this.list.sort(this.compare('titleNumber'))
      this.page = 1
      // this.getSubjectList();
    },
    // 排序函数
    compare (attr) {
      let that = this
      return function (a, b) {
        var val1 = a[attr].slice(1);
        var val2 = b[attr].slice(1);
        // console.log(val1,val2);
        if (that.order) {
          return val2 - val1;
        } else {
          return val1 - val2;
        }
      }
    },
    //跳转题目页面
    goTo (id, type, subjectType, index) {
      console.log(id, type, subjectType, index);
      sessionStorage.setItem('idx', this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1)
      //朗读句子
      if (type == 'RA') {

        this.$router.push('/writingRA?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));

      }

      if (type == 'RS') {

        this.$router.push('/writingRS?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
      }

      if (type == 'DI') {

        this.$router.push('/writingDI?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
      }

      if (type == 'RL') {

        this.$router.push('/writingRL?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
      }

      if (type == 'ASQ') {

        this.$router.push('/writingASQ?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
      }

      if (type == 'FIBR') {

        this.$router.push('/readingRFIB?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
      }


      if (type == 'RP') {

        this.$router.push('/readingRP?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
      }


      if (type == 'FIBRW') {

        this.$router.push('/readingFIBRW?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
      }

      if (type == 'MCS' && subjectType == '3') {

        this.$router.push('/readingMCS?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
      }

      if (type == 'MCM' && subjectType == '3') {

        this.$router.push('/readingMCM?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
      }

      if (type == 'SST') {

        this.$router.push('/listeningSST?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
      }

      if (type == 'WFD') {

        this.$router.push('/listeningWFD?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
      }

      if (type == 'FIB') {

        this.$router.push('/listeningFIB?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
      }

      if (type == 'MCS' && subjectType == '2') {

        this.$router.push('/listeningMCS?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
      }

      if (type == 'MCM' && subjectType == '2') {

        this.$router.push('/listeningMCM?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
      }

      if (type == 'SMW') {

        this.$router.push('/readingSMW?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
      }

      if (type == 'HCS') {

        this.$router.push('/listeningHCS?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
      }

      if (type == 'HIW') {

        this.$router.push('/listeningHIW?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
      }

      if (type == 'SWT') {

        this.$router.push('/writingSWT?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
      }

      if (type == 'WE') {

        this.$router.push('/writingWE?id=' + id + '&idx=' + (this.page > 1 ? (this.page - 1) * 30 + index + 1 : index + 1));
      }
    },

    //获取题目类型
    getSubjectType () {
      sendPost(api.getSubjectType, {}).then((res) => {
        this.ky = res.data.ky;
        this.tl = res.data.tl;
        this.yd = res.data.yd;
        this.xz = res.data.xz;
        // console.log(res);
        this.getSubjectList()
      })
    },
    //获取题目列表
    //获取题目列表
    getSubjectList () {
      let that = this
      var order = 'asc';
      if (that.order == false) {
        order = 'desc';
      }
      sendPost(api.getSubjectList, {
        subjectTypeId: that.subjectType,
        page: that.page,
        rows: that.rows,
        order: order,
        sortType: that.sortType,
        selectNum: that.selectNum,
        selectColour: that.selectColour,
        selectFlag: that.selectFlag,
        typeType: that.typeType,
        keywords: that.keywords
      }).then((res) => {
        // chrome
        document.body.scrollTop = 0
        // firefox
        document.documentElement.scrollTop = 0
        // safari
        window.pageYOffset = 0
        // console.log(res)
        that.list = res.data.list
        that.filterList = res.data.list
        that.list.forEach(item => {
          this.num.push(item.num)
        });
        that.total = res.data.total
        that.lxTotal = res.data.lxTotal
      })
    },
    handleOpen () {
      // 根据题目类型获取题目列表
      this.getSubjectType()

      Velocity(document.getElementById("drawerBtn"), {
        translateX: "-71.5rem"
      }, {
        duration: 250
      })

    },
    // 当前页码发生改变时触发
    handleCurrentChange (value) {
      console.log(value)
      this.page = value
      this.getSubjectList()
    },
    handleClose () {
      Velocity(document.getElementById("drawerBtn"), {
        translateX: "3.75rem"
      }, {
        duration: 250
      })
    },
    handleDrawer () {
      this.drawer = !this.drawer
    },
    leaveLabel () {
      // console.log('leave');
      this.cancleShow = false
    },


    enterLabel () {
      // console.log('enter');
      this.cancleShow = true
    },
  }
}
</script>

<style lang="less" scoped>
/deep/.el-input__inner:focus {
  border-color: #13bfbf;
  color: #13bfbf;
  .el-input__prefix {
    color: #13bfbf;
  }
}
.bgfff {
  height: 1.875rem;
  background-color: #fff;
  width: 100%;
}
.line {
  width: 100%;
  height: 0.125rem;
  background-color: #000;
  opacity: 0.2;
}
.sort {
  height: 3.75rem;
  line-height: 3.75rem;
  overflow: hidden;
  font-size: 1rem;
  color: #666666;
  background-color: #fcfcfc;
  font-weight: normal;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: left;
  cursor: pointer;
  .iconfont {
    color: #ccc;
    font-weight: bold;
  }
  display: flex;
  span {
    width: 12.5rem;
    text-align: left;
  }
  span:hover {
    .iconfont {
      display: inline-block;
      transform: rotateX(180deg);
      transition: 0.4s linear;
      -webkit-transform: rotateX(180deg);
      -moz-transform: rotateX(180deg);
      -o-transform: rotateX(180deg);
      -ms-transform: rotateX(180deg);
      color: #000;
    }
  }
  .collect:hover,
  .state:hover,
  .times:hover {
    .iconfont {
      transform: rotateX(0);
    }
  }
  .collect_box,
  .state_box,
  .time_box {
    position: absolute;
    z-index: 999;
    width: 3rem;
    height: 7.5rem;
    display: flex;
    flex-direction: column;
    margin-left: 1rem;
    span {
      height: 1.875rem;
      width: 3rem;
      line-height: 1.875rem;
      text-align: center;
      color: #999;
      background-color: #fafafa;
    }
    span:hover {
      transform: scale(1.04);
      color: #000;
      background-color: #fff;
    }
  }
  .collect_box {
    margin-left: -1.25rem;
    span {
      width: 5rem;
      border-radius: 0 0 0.3125rem 0.3125rem;
    }
  }
  .state_box {
    margin-left: -1.25rem;
    span {
      width: 7rem;
      border-radius: 0 0 0.3125rem 0.3125rem;
    }
  }
}
.tm {
  li {
    position: relative;
    display: flex;
    cursor: pointer;
    width: 100%;
    height: 3.75rem;
    line-height: 3.75rem;
    font-size: 1rem;
    color: #333333;
    border-bottom: 1px solid #efefef !important;
  }
  li:hover {
    background-color: #fafafa;
  }
  .title {
    width: 37.5rem;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    margin-right: 0.625rem;
  }

  .el-tag {
    height: 1.575rem;
    line-height: 1.575rem;
    margin-right: 0.9375rem;
    color: #fff;
    padding: 0 0.375rem;
    border: none;
  }
  .label_td {
    right: 0;
    position: absolute;
    width: 6.25rem;
    height: 100%;
    text-align: right;
  }
}
.tips {
  font-size: 0.875rem;
  color: #ff5e4e;
}
// 动画
/deep/.el-tabs__nav,
.is-top {
  padding: 1.5rem 0;
}
/deep/.el-tabs__active-bar {
  height: 0.25rem;
  background-color: #ff5e4e;
}
::v-deep {
  .el-pagination.is-background .el-pager li:not(.disabled) {
    background-color: #fff; // 进行修改未选中背景和字体
    // color: #fff;
  }
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #ff5e4e; // 进行修改选中项背景和字体
    color: #fff;
  }
}
.el-pagination {
  font-size: 1.25rem;
  padding-top: 5rem;
  margin-left: 30rem;
}
/deep/.drawerbtn {
  position: fixed;
  top: 50%;
  right: 3.8rem;
  z-index: 3000;
  width: 5rem;
  height: 5rem;
  background: #ff5e4e;
  box-shadow: 0px 0px 1.25rem 0px #ff5e4e;
  border-radius: 50%;
  transform: translate(50%, 50%);
  font-size: 1rem;
  border: none;
  .iconfont {
    font-size: 1.125rem;
  }
  .txt {
    margin-top: 1rem;
  }
}
/deep/.el-drawer__header {
  margin-bottom: 0;
  padding: 0;
}
/deep/.el-drawer__body {
  margin-top: 0.875rem;
  padding: 0 2.75rem;
  box-sizing: border-box;
}
/deep/ .el-tabs__nav {
  padding: 1.5rem 0;
}
.el-drawer {
  position: relative;
  .title {
    height: 5rem;
    display: flex;
    .cate-title {
      width: 55rem;
      display: flex;
      color: #333;
      font-size: 2rem;
      line-height: 5rem;
      .imgshow {
        width: 5rem;
        height: 5rem;
        margin-right: 1.4375rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .ipt {
      flex: 1;
      .el-input {
        width: 20rem;
        height: 2.5rem;
        border-radius: 1.25rem;
        margin-top: 1.5625rem;
        ::placeholder {
          color: #333;
          font-size: 1rem;
        }
      }
    }
  }
  .tabs {
    .grid-content {
      /deep/.el-tabs__nav {
        height: 4.375rem;
        line-height: 4.375rem;
      }
    }
  }
  .tips {
    font-size: 1rem;
    color: #999;
    width: 12.5rem;
    margin-bottom: 1rem;
  }
}
.tips_wx {
  color: #ff5e4e;
  width: 23.75rem !important;
  padding-left: 9.375rem;
}
/deep/.el-tabs__nav-wrap::after {
  background-color: #ededed !important;
}

// 列表
.container {
  background-color: #fff;
}
.tb {
  width: 75rem;
  table {
    .w100 {
      width: 7.0625rem;
    }
    th {
      height: 3.75rem;
      width: 8.125rem;
      font-size: 1rem;
      color: #666666;
      background-color: #fcfcfc;
      font-weight: normal;
      .iconfont {
        color: #ccc;
        cursor: pointer;
      }
    }
    th:hover {
      .iconfont {
        display: inline-block;
        transform: rotateX(180deg);
        transition: 0.4s linear;
        -webkit-transform: rotateX(180deg);
        -moz-transform: rotateX(180deg);
        -o-transform: rotateX(180deg);
        -ms-transform: rotateX(180deg);
        color: #000;
      }
    }
    .tips {
      font-size: 0.875rem;
      color: #ff5e4e;
    }
    tbody {
      tr {
        height: 3.75rem;
        line-height: 3.75rem;
        td {
          font-size: 1rem;
          color: #333333;
        }
      }
    }
    .el-tag {
      height: 1.875rem;
      line-height: 1.875rem;
      margin-right: 0.9375rem;
      color: #fff;
      border: none;
    }
  }
}
.jj-bg {
  background: #ff9b4f;
}
.jj-color {
  color: #ff9b4f !important;
}
.lxt-bg {
  background: #7cc3d6;
}
.lxt-color {
  color: #7cc3d6 !important;
}
.wrong-bg {
  background: #ff5e4e;
}
.wrong-color {
  color: #ff5e4e !important;
}
.gpzt-bg {
  background: #13bfbf;
}
.gpzt-color {
  color: #13bfbf !important;
}
.lxcs-bg {
  background: #99bbe4;
}
.lxcs-color {
  color: #99bbe4 !important;
}
.ylx-bg {
  background: #94d0f7;
}
.ylx-color {
  color: #94d0f7 !important;
}
td {
  position: relative;
}
.el-pagination {
  margin-bottom: 6.5625rem;
}
/deep/.el-drawer.rtl {
  overflow: auto;
  /* overflow-x: auto; */
}

/*2.隐藏滚动条，太丑了*/
/deep/.el-drawer__container ::-webkit-scrollbar {
  display: none;
}

.search-ipt {
  z-index: 999;
  width: 18rem;
  height: 2.5rem;
  margin-top: 5.8rem;
  /deep/.el-input__inner {
    border-radius: 1.25rem;
  }
}
</style>
